<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/site-footer.css">
</head>

<body>
    <!-- 分类界面导航栏 -->
    <div class="nav">
        <img src="imgs/logo_files/logo.png" alt="" class="logo">
        <!-- 分类导航 -->
        <div class="nav-c">
            <ul class="cloth-nav">
                <li class="cloth-category">
                    <a href="#" class="homepage">首页</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">女装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">男装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">箱包</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">配饰</a>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="search-area">
                <!-- <form action="" class="search-form"> -->
                <input type="search" class="search-text" placeholder="搜索商品名/商品编号">
                <a href="#" class="search-btn">
                    <!-- <img src="imgs/logo_files/icon-21.png" alt="" class="search-img"> -->
                </a>
                <!-- </form> -->
            </div>
            <div class="right-icon">
                <a href="" class="like"></a>
                <a href="" class="cart"></a>
                <a href="" class="personal"></a>
            </div>
        </div>
    </div>
    <!-- 背景图 -->
    <div class="photo-box">
        <img src="imgs/logo_files/index1.png" alt="" class="index-photo">
        <ul class="index-dot">
            <li class="photo-dot"></li>
            <li class="photo-dot"></li>
            <li class="photo-dot"></li>
            <li class="photo-dot"></li>
        </ul>
    </div>
    <!-- 标语区域 -->
    <div class="slogan-box">
        <p class="slogan">时尚首选 · 新品登场</p>
        <p class="eslogan">FASHION CHOICE · NEW PRODUCTS</p>
    </div>
    <!-- 商品区域 -->
    <div class="index-cloth-box">
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link middle"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item right-last">
            <a href="#" class="index-cloth-link"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link middle"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item right-last">
            <a href="#" class="index-cloth-link"></a>
            <p class="index-cloth-dec">设计师合作款·工装长裤&nbsp;&nbsp;冬季上新【棉质·抽绳】</p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥499</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <a href="#" class="right-arr"></a>
    </div>

    <!-- 标语区域 -->
    <div class="slogan-box">
        <p class="another slogan">品牌热卖 · 人气推荐</p>
        <p class="eslogan">HOT SALE·POPULAR RECOMMENDATION</p>
    </div>
    <!-- 商品区域 -->
    <div class="index-cloth-box">
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link4"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link5"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item right-last">
            <a href="#" class="index-cloth-link6"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link4"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item">
            <a href="#" class="index-cloth-link5"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="index-cloth-item right-last">
            <a href="#" class="index-cloth-link6"></a>
            <p class="index-cloth-dec">秋冬男装 摇粒绒松紧卫衣【休闲卫衣保暖抓绒】 </p>
            <p class="index-cloth-size">【S-XL】</p>
            <span class="index-cloth-price">￥389</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <a href="#" class="right-arr"></a>
    </div>

    <div class="slogan-box">
        <p class="another slogan">信息媒介</p>
        <p class="eslogan">INFORMATION</p>
    </div>
    <!-- 底部导航栏 -->
    <div class="index-information-list">
        <ul class="index-list">
            <li class="index-list-item left-item">实体门店资讯</li>
            <li class="index-list-item">最新消息</li>
            <li class="index-list-item">招募资讯</li>
            <li class="index-list-item">订阅电子报</li>
            <li class="index-list-item left-item">注册会员</li>
            <li class="index-list-item">网络商店FAQ</li>
            <li class="index-list-item">关于BALANCE</li>
            <li class="index-list-item">政府政令</li>
        </ul>
    </div>
    <!-- 网站底部 -->
    <div class="site-footer">
        <div class="footer-c">
            <!-- 左侧logo -->
            <div class="sitelogo">
                <img class="img-logo" src="imgs/logo_files/logo.png" alt="">
            </div>
            <!-- 网站底部中间区域 -->
            <div class="footer-info">
                <ul class="top-info">
                    <li class="info-iteam">
                        <a href="" class="link_iteam">
                            门店资讯
                        </a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam">
                        <a href="" class="link_iteam">
                            网络购物FAQ</a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            关于BALANCE</a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            电子报订阅
                        </a> </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            买卖定型化契约宣传
                        </a> </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            政府政令
                        </a> </li>
                </ul>
                <p class="under-info">Copyright © BALANCE Ltd. All rights reserved</p>
            </div>
            <!-- 网站右侧二维码区域 -->
            <div class="QR-code">
                <img class="img-QR-code" src="imgs/logo_files/QR-code-right.png" alt="">
                <img class="img-QR-code QR-2" src="imgs/logo_files/QR_code.png" alt="">
            </div>
        </div>
    </div>
</body>

</html>